<template>
  <div class="home-page">
    <home-header></home-header>
    <div class="navbar">
      <ly-tabs v-model="selectId" class="ly-tabs" activeColor="#fff" @change="changeTab">
        <ly-tab-item
          v-for="(item, index) in items"
          :name="index"
          :title="item.label"
          :key="index"
          :badge="index"
        />
      </ly-tabs>
      <div class="sort-name" @click="goCat">
        <i class="iconfont icon-daohangfenlei"></i>
        <span>分类</span>
      </div>
    </div>
    <component :is="homeComponent"></component>
  </div>
</template>

<script>
import HomeHeader from "./components/HomeHeader/HomeHeader.vue";
import HomeIndex from "./components/HomeIndex/HomeIndex.vue";
import HomeCate from "./components/HomeCate/HomeCate.vue";
import HomeClothes from "./components/HomeClothes/HomeClothes.vue";
import HomeShoes from "./components/HomeShoes/HomeShoes.vue";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    HomeHeader,
    HomeIndex,
    HomeCate,
    HomeClothes,
    HomeShoes,
  },
  data() {
    //这里存放数据
    return {
      homeComponent: "HomeIndex",
      selectId: 0,
      items: [
        {
          label: "首页",
        },
        {
          label: "家用电器",
        },
        {
          label: "男装女装",
        },
        {
          label: "鞋靴箱包",
        },
        {
          label: "手机数码",
        },
        {
          label: "电脑办公",
        },
        {
          label: "家居家纺",
        },
        {
          label: "个人化妆",
        },
        {
          label: "休闲运动",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeTab(index) {
      this.$bus.$emit("showCateData", index);
      if (index == 0) {
        this.homeComponent = "HomeIndex";
      } else if (index == 1) {
        this.homeComponent = "HomeCate";
      } else if (index == 2) {
        this.homeComponent = "HomeClothes";
      } else if (index == 3) {
        this.homeComponent = "HomeShoes";
      }
    },
    goCat(){
      this.$router.push({path:'/categorypage'})
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less">
.home-page {
  .navbar {
    width: 100%;
    display: flex;
    position: fixed;
    top: 4.4rem;
    left: 0;
    background-color: transparent;
    color: #fff;
    z-index: 999;
    .ly-tabs {
      overflow: hidden;
      position: relative;
      width: 100%;
      border-bottom: 1px solid transparent;
      background-color: transparent;
      .ly-tabs__tab-list {
        .ly-tabs__active-line {
          background-color: transparent !important;
          &::after {
            content: " ";
            position: absolute;
            width: 12px;
            height: 6px;
            border-radius: 0 0 100% 100%;
            bottom: 0;
            left: 0.5rem;
            border: 2px solid #fff;
            border-top: none;
          }
        }
      }
    }
    .sort-name {
      width: 6rem;
      text-align: center;
      height: 4rem;
      line-height: 4rem;
      margin-right: 0.5rem;
    }
  }
}
</style>
